<template>
  <div class="control">
    <div class="circle">
      <div class="circle-top">
        <img class="center" ref="center" src="~assets/img/control-circle.png" />
        <!-- <img class="stop-control" :src="controlIcon.cenrerControl" @click="centerControl" /> -->
        <img
          class="top"
          :src="controlIcon.top"
          @mousedown="topControl"
          @mouseup="mouseup_fn"
        />
        <img
          class="right"
          :src="controlIcon.right"
          @mousedown="rightControl"
          @mouseup="mouseup_fn"
        />
        <img
          class="bottom"
          :src="controlIcon.bottom"
          @mousedown="bottomControl"
          @mouseup="mouseup_fn"
        />
        <img
          class="left"
          :src="controlIcon.left"
          @mousedown="leftControl"
          @mouseup="mouseup_fn"
        />
      </div>
      <div class="circle-bottom">
        <img
          class="add"
          :src="controlIcon.add"
          @mousedown="add_fn"
          @mouseup="mouseup_fn"
        />
        <img
          class="reduce"
          :src="controlIcon.reduce"
          @mousedown="reduce_fn"
          @mouseup="mouseup_fn"
        />
      </div>
    </div>
  </div>
</template>

<script>
import bus from "@/utils/bus";
import { getData, postData } from "@/request/http";
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      sn: "",
      controlIcon: {
        // cenrerControl: require("@/assets/img/stop-control.png"),
        top: require("@/assets/img/play-icon-top.png"),
        right: require("@/assets/img/play-icon-right.png"),
        bottom: require("@/assets/img/play-icon-bottom.png"),
        left: require("@/assets/img/play-icon-left.png"),
        add: require("@/assets/img/add-icon.png"),
        reduce: require("@/assets/img/reduce-icon.png"),
      },
      playBtnColor: "#fff",
      playBtnBackground: "#5447ff",
      stopBtnColor: "#fff",
      stopBtnBackground: "#d03edd",
      treeId: "",
    };
  },
  computed: {
    //获取到screen 改变的index
    videoSelectedIndex() {
      //console.log(this.$store.state.cameraPlay.videoSelectedIndex);
      return this.$store.state.cameraPlay.videoSelectedIndex;
    },
    //获取分屏点击的 index以及数组
    videoArrData() {
      let index_sel = this.$store.state.cameraPlay.videoSelectedIndex;
      let videoArrData = this.$store.state.cameraPlay.videoArrData;
      //console.log(index_sel);
      //console.log(videoArrData);
      let sn_sel;
      if (index_sel == 0) {
        sn_sel = videoArrData[0].sn;
      } else {
        sn_sel = videoArrData[index_sel].sn;
      }

      return sn_sel;
    },
    //获取到tree改变的id
    treeData() {
      return this.$store.state.cameraPlay.treeData;
    },
  },
  created() {},
  mounted() {
    bus.$on("treeChange", (data) => {
      // console.log(data.id);
      this.sn = data.id;
    });
  },
  methods: {
    //控制台-上
    topControl() {
      var that = this;
      that.controlIcon.top = require("assets/img/play-icon-top2.png");
      that.controlIcon.cenrerControl = require("assets/img/stop-control.png");
      that.controlIcon.right = require("assets/img/play-icon-right.png");
      that.controlIcon.bottom = require("assets/img/play-icon-bottom.png");
      that.controlIcon.left = require("assets/img/play-icon-left.png");
      postData("/adminweb/device/ptzcontrol", {
        sn: that.sn,
        action: 3,
        step: 2,
      })
        .then((res) => {
          // console.log(res);
          if (res.code == 0) {
          } else {
            that.$message.error(res.code + "，" + res.msg);
          }
        })
        .catch((res) => {
          that.$message.error(res.code + "，" + res.msg);
        });
    },

    // 控制台-右
    rightControl() {
      var that = this;
      that.controlIcon.right = require("assets/img/play-icon-right2.png");
      that.controlIcon.cenrerControl = require("assets/img/stop-control.png");
      that.controlIcon.top = require("assets/img/play-icon-top.png");
      that.controlIcon.bottom = require("assets/img/play-icon-bottom.png");
      that.controlIcon.left = require("assets/img/play-icon-left.png");
      postData("/adminweb/device/ptzcontrol", {
        sn: that.sn,
        action: 2,
        step: 2,
      })
        .then((res) => {
          //  console.log(res);
          if (res.code == 0) {
          } else {
            that.$message.error(res.code + "，" + res.msg);
          }
        })
        .catch((res) => {
          that.$message.error(res.code + "，" + res.msg);
        });
    },
    //控制台-底
    bottomControl() {
      var that = this;
      that.controlIcon.bottom = require("assets/img/play-icon-bottom2.png");
      that.controlIcon.cenrerControl = require("assets/img/stop-control.png");
      that.controlIcon.top = require("assets/img/play-icon-top.png");
      that.controlIcon.right = require("assets/img/play-icon-right.png");
      that.controlIcon.left = require("assets/img/play-icon-left.png");
      postData("/adminweb/device/ptzcontrol", {
        sn: that.sn,
        action: 4,
        step: 2,
      })
        .then((res) => {
          //  console.log(res);
          if (res.code == 0) {
          } else {
            that.$message.error(res.code + "，" + res.msg);
          }
        })
        .catch((res) => {
          that.$message.error(res.code + "，" + res.msg);
        });
    },
    //控制台-左
    leftControl() {
      var that = this;
      that.controlIcon.left = require("assets/img/play-icon-left2.png");
      that.controlIcon.cenrerControl = require("assets/img/stop-control.png");
      that.controlIcon.top = require("assets/img/play-icon-top.png");
      that.controlIcon.right = require("assets/img/play-icon-right.png");
      that.controlIcon.bottom = require("assets/img/play-icon-bottom.png");
      postData("/adminweb/device/ptzcontrol", {
        sn: that.sn,
        action: 1,
        step: 2,
      })
        .then((res) => {
          //  console.log(res);
          if (res.code == 0) {
          } else {
            that.$message.error(res.code + "，" + res.msg);
          }
        })
        .catch((res) => {
          that.$message.error(res.code + "，" + res.msg);
        });
    },
    //镜头-加号
    add_fn() {
      var that = this;
      that.controlIcon.left = require("assets/img/play-icon-left.png");
      that.controlIcon.cenrerControl = require("assets/img/stop-control.png");
      that.controlIcon.top = require("assets/img/play-icon-top.png");
      that.controlIcon.right = require("assets/img/play-icon-right.png");
      that.controlIcon.bottom = require("assets/img/play-icon-bottom.png");
      that.controlIcon.add = require("assets/img/add-icon2.png");
      that.controlIcon.reduce = require("assets/img/reduce-icon.png");
      postData("/adminweb/device/ptzcontrol", {
        sn: that.sn,
        action: 5,
        step: 2,
      })
        .then((res) => {
          //  console.log(res);
          if (res.code == 0) {
          } else {
            that.$message.error(res.code + "，" + res.msg);
          }
        })
        .catch((res) => {
          that.$message.error(res.code + "，" + res.msg);
        });
    },
    //镜头-减号
    reduce_fn() {
      var that = this;
      that.controlIcon.left = require("assets/img/play-icon-left.png");
      that.controlIcon.cenrerControl = require("assets/img/stop-control.png");
      that.controlIcon.top = require("assets/img/play-icon-top.png");
      that.controlIcon.right = require("assets/img/play-icon-right.png");
      that.controlIcon.bottom = require("assets/img/play-icon-bottom.png");
      that.controlIcon.add = require("assets/img/add-icon.png");
      that.controlIcon.reduce = require("assets/img/reduce-icon2.png");
      postData("/adminweb/device/ptzcontrol", {
        sn: that.sn,
        action: 6,
        step: 2,
      })
        .then((res) => {
          //  console.log(res);
          if (res.code == 0) {
          } else {
            that.$message.error(res.code + "，" + res.msg);
          }
        })
        .catch((res) => {
          that.$message.error(res.code + "，" + res.msg);
        });
    },
    //控制台-鼠标离开停止
    mouseup_fn() {
      var that = this;
      that.controlIcon.top = require("assets/img/play-icon-top.png");
      that.controlIcon.cenrerControl = require("assets/img/stop-control.png");
      that.controlIcon.right = require("assets/img/play-icon-right.png");
      that.controlIcon.bottom = require("assets/img/play-icon-bottom.png");
      that.controlIcon.left = require("assets/img/play-icon-left.png");
      that.controlIcon.add = require("assets/img/add-icon.png");
      that.controlIcon.reduce = require("assets/img/reduce-icon.png");
      postData("/adminweb/device/ptzcontrol", {
        sn: that.sn,
        action: 24,
        step: 2,
      })
        .then((res) => {
          // console.log(res);
          if (res.code == 0) {
          } else {
            that.$message.error(res.code + "，" + res.msg);
          }
        })
        .catch((res) => {
          that.$message.error(res.code + "，" + res.msg);
        });
    },
  },
  watch: {
    treeData: {
      handler(_new) {
        this.sn = _new["id"];
      },
      deep: true,
      immediate: true,
    },
    videoArrData: {
      handler(_new) {
        //  console.log(_new);
        this.sn = _new;
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>
<style scoped>
.control {
  width: 50%;
  height: 70%;
  background: rgb(0, 0, 0, 0.8);
  box-shadow: 0px 2px 3px #438ec0;
  border-radius: 30px;
  position: relative;
  margin: 0 auto;
  margin-top: 10%;
}
.control .circle {
  width: 100%;
  height: 100%;
}
.circle-top {
  width: 100%;
  height: 80%;
  position: relative;
}
.circle-bottom {
  width: 100%;
  height: 20%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.circle .center {
  width: 55%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.control .circle img {
  display: inline-block;
}
.stop-control {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.circle .top {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 10px);
}
.circle .right {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(-10px, -50%);
}
.circle .bottom {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -10px);
}
.circle .left {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(10px, -50%);
}

.btn-wrap {
  width: 80%;
  height: 60px;
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translate(-50%, 0);
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.play-btn {
  border: 0;
  background-color: transparent;
  outline: none;
  width: 55px;
  height: 30px;
  line-height: 30px;
  border-radius: 15px;
}
.stop-btn {
  border: 0;
  background-color: transparent;
  outline: none;
  width: 55px;
  height: 30px;
  line-height: 30px;
  border-radius: 15px;
}
</style>
